<template>
    <div>
        <el-form inline :model="formInline" class="uiwu-form-inline">
            <el-form-item label="支付时间">
                <el-date-picker
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    v-model="formInline.creationTime"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changePicker"
                />
            </el-form-item>
            <el-form-item>
                <el-input
                    v-model="formInline.s_keyword"
                    placeholder="请输入订单编号/用户昵称/手机号码搜索"
                    clearable
                    style="width: 400px"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
                <el-button @click="exportOrder">导出</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tabelData" class="m-t-16">
            <el-table-column prop="sn" label="订单编号" align="center" />
            <el-table-column prop="avatar" label="用户头像" align="center">
                <template #default="{ row }">
                    <el-image
                        :src="row.avatar"
                        style="width: 70px; height: 70px"
                        :preview-src-list="[row.avatar]"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="store_name" label="昵称" align="center" />
            <el-table-column prop="store_mobile" label="手机号码" align="center" />
            <el-table-column prop="order_amount" label="订单金额" align="center" />
            <el-table-column prop="settlement_radio" label="抽成比例" align="center" />
            <el-table-column prop="get_price" label="抽成后金额" align="center" />
            <el-table-column prop="settlement_status_desc" label="抽成后结算状态" align="center" />
            <el-table-column prop="pay_time" label="支付时间" align="center" />
        </el-table>
        <div class="uiwu-pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleSizeChange"
                :current-page="currentPage4"
                :page-size="10"
                background
                hide-on-single-page
                layout="total, prev, pager, next, jumper"
                :total="totals"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { apiSettleLists } from '@/api/finance/finance'
@Component({
    components: {}
})
export default class Balance extends Vue {
    formInline: any = {
        creationTime: '',
        s_keyword: '',
        start_times: '',
        end_times: ''
    }
    tabelData: any[] = []
    currentPage4 = 1
    totals = 0
    handleSizeChange(e: number) {
        this.currentPage4 = e
        this.getapiSettleLists()
    }
    /**
     * changePicker时间选择回调
     * @param e 回调选中的时间内容
     */
    changePicker(e: any) {
        this.formInline.start_times = null
        this.formInline.end_time = null
        if (e) {
            this.formInline.start_times = e[0]
            this.formInline.end_times = e[1]
        }
    }
    /**
     * searchQuery 筛选
     */
    searchQuery() {
        this.currentPage4 = 1
        this.getapiSettleLists()
    }
    /**
     * resetQuery 重置筛选条件
     */
    resetQuery() {
        this.currentPage4 = 1
        this.formInline = {
            creationTime: '',
            s_keyword: '',
            start_times: '',
            end_times: ''
        }
        this.getapiSettleLists()
    }
    async getapiSettleLists() {
        const postData = JSON.parse(JSON.stringify(this.formInline))
        delete postData.creationTime
        const { lists, count } = await apiSettleLists({
            ...postData,
            page_size: 10,
            page_no: this.currentPage4,
            settlement_status: this.$route.query.type
        })
        this.tabelData = lists
        this.totals = count
    }
    /**
     * exportOrder 订单导出
     */
    async exportOrder() {
        const postData = JSON.parse(JSON.stringify(this.formInline))
        delete postData.creationTime
        await apiSettleLists({
            export: 2,
            ...postData
        })
    }
    created() {
        this.getapiSettleLists()
    }
    activated() {
        this.resetQuery()
    }
}
</script>
<style lang="scss" scoped>
.uiwu-form-inline {
    background-color: #fff;
    margin-bottom: 16px;
    padding: 16px;
    padding-bottom: 0;
}
.uiwu-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 16px 0;
}
::v-deep .el-date-editor .el-range-separator {
    width: 6%;
}
</style>
